@use "@/styles/usenamespace.scss" as ns;
@use "@/styles/mixin.scss" as mixin;
@use "@/styles/function.scss" as fun;

@include ns.b(input) using ($b) {
  #{fun.getCssVarName($b, placeholderColor)}: #999;
  $gap: 16rpx;
  display: flex;

  @include ns.e(prefix) using ($e) {
    display: flex;
    align-items: center;
    flex-shrink: 0;

    & > :nth-child(n) {
      margin-right: $gap;
    }
  }

  @include ns.e(suffix) using ($e) {
    display: flex;
    align-items: center;
    flex-shrink: 0;

    & > :nth-child(n) {
      margin-left: $gap;
    }
  }

  @include ns.e(content) using ($e) {
    flex: auto;
    position: relative;
    display: flex;
  }

  @include ns.e(limit) using ($e) {
    background: fun.getCssVarValue(info-backgroundColor);
    margin-left: $gap;
  }

  @include ns.e(input) using ($e) {
    .input-placeholder {
      color: fun.getCssVarValue($b, placeholderColor);
    }
  }

  @include ns.r(textarea) using ($r) {
    width: 100%;
    @include ns.b($b) using ($b) {
      @include ns.e(input) using ($e) {
        height: 220rpx;
        width: 100%;
      }

      @include ns.e(limit) using ($e) {
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
  }

  @include ns.s(disabled) using ($s) {
    color: fun.getCssVarValue(disabled-textColor);
    pointer-events: none;
    @include ns.b($b) using ($b) {
      @include ns.e(input) using ($e) {
        .input-placeholder {
          color: inherit;
        }
      }
      @include ns.e(limit) using ($e) {
        background: transparent;
      }
    }
  }
}
